<template>
  <i-card padding="24rpx 32rpx" width="0" top="20rpx" @click="handleClick">
    <view class="card_body">
      <view class="item_name">
        <text class="title">{{ data.title }}</text>
        <text>{{ data.introduction }}</text>
        <view class="item_time">
          <text>{{ data.createTime }}</text>
        </view>
      </view>
      <view class="card_left">
        <view class="image">
          <image v-if="data?.image" :src="data?.image"></image>
          <view v-else class="image_default"> </view>
        </view>
      </view>
      <!-- <i-tag :bgColor="data.userId ? 'rgba(251, 101, 46, 0.1)' : 'rgba(0, 122, 255, 0.1)'" radius="4rpx" padding="2rpx 8rpx" :color="data.userId ? '#FB652E' : '#007AFF'" v-if="type">{{data.userId ? '系统' : '工单'}}</i-tag> -->
    </view>
  </i-card>
</template>

<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  } as any,
  type: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["click"]);
const handleClick = () => {
  emit("click", props.data);
};
</script>

<style lang="scss" scoped>
.card_body {
  @include flexRS;

  .card_left {
    @include flexR;

    .image {
      width: 240rpx;
      height: 176rpx;
      border-radius: 12rpx;
      // margin-right: 24rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
      .image_default {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        border-radius: 12rpx;
      }
    }
  }
  .item_name {
    @include flexC;
    font-size: 24rpx !important;
    color: #666666;
		margin-right: 24rpx;

    .title {
      // @include titlefont(28rpx, nowrap);
			color: #000;
			
      margin-bottom: 8rpx;
			font-weight: bold;
    }

    text {
      font-size: 24rpx;
      font-weight: 400;
      // margin-right: 20rpx;
      margin-bottom: 8rpx;
    }
    .item_time {
      color: #999;
    }
  }
}
</style>
